<template>
    <a-card>
        <!-- <div style="margin-bottom: 20px;">
            <a-button type="danger" @click="goBackToHome" style="height: 40px;" icon="home">回到首页</a-button>
        </div> -->
        <a-calendar :header-render="headerRender" @panelChange="onPanelChange">
            <div slot="dateCellRender" slot-scope="value" class="cellVs">
                <div v-if="getListData(value).isNum !== 0" class="cellV">
                    <div class="cellVt">
                        <!-- <a-tag color="#2db7f5">
                            排班数：{{ getListData(value).list.length }} 次
                        </a-tag> -->
                        <a-tag :color="getListData(value).isNum == 0 ? '#ccc' : 'green'">
                            预约人数：{{ getListData(value).isNum }} 人
                        </a-tag>
                    </div>
                    <div class="cellVe">
                        <div class="cellVei" v-for="(i, o) in getListData(value).yyList" :key="o">
                            <a-badge :color="i.status == 1 ? 'green' : '#ccc'" />
                            <span style="width: 80px;">{{ i.yyInterval }}</span>
                            <span style="width: 80px;">{{ i.patientId_dictText }}</span>
                        </div>
                    </div>
                </div>
                <div class="cellV" v-else>
                    <!-- <a-tag color="#ddd">暂无排班</a-tag> -->
                </div>
            </div>
        </a-calendar>
    </a-card>
</template>

<script>
import { httpAction, getAction, getFileAccessHttpUrl } from '@/api/manage'
import moment from 'moment'
export default {
    data() {
        return {
            moment,
            mainList: [
                {
                    date: '2025-02-03',
                    list: [
                        { id: 1, serial: 1, status: 1, yyInterval: '08:00-08:30', patientName: '张三撒' },
                        { id: 2, serial: 2, status: 0, yyInterval: '09:30-09:00', patientName: '' },
                        { id: 3, serial: 3, status: 1, yyInterval: '09:00-09:30', patientName: '张三大' },
                        { id: 4, serial: 4, status: 0, yyInterval: '09:30-10:00', patientName: '' },
                        { id: 5, serial: 5, status: 0, yyInterval: '10:30-10:30', patientName: '' },
                        { id: 6, serial: 6, status: 0, yyInterval: '10:30-11:00', patientName: '' },
                        { id: 7, serial: 7, status: 1, yyInterval: '11:00-11:30', patientName: '张三沃' },
                        { id: 8, serial: 8, status: 0, yyInterval: '11:30-12:00', patientName: '' },
                        { id: 9, serial: 9, status: 0, yyInterval: '12:00-12:30', patientName: '' },
                        { id: 10, serial: 10, status: 0, yyInterval: '12:30-13:00', patientName: '' },
                    ]
                },
                {
                    date: '2025-02-09',
                    list: [
                        { id: 1, serial: 1, status: 1, yyInterval: '08:00-08:30', patientName: '张三撒' },
                        { id: 2, serial: 2, status: 0, yyInterval: '09:30-09:00', patientName: '' },
                        { id: 3, serial: 3, status: 1, yyInterval: '09:00-09:30', patientName: '张三大' },
                        { id: 4, serial: 4, status: 0, yyInterval: '09:30-10:00', patientName: '' },
                        { id: 5, serial: 5, status: 0, yyInterval: '10:30-10:30', patientName: '' },
                        { id: 6, serial: 6, status: 0, yyInterval: '10:30-11:00', patientName: '' },
                        { id: 7, serial: 7, status: 1, yyInterval: '11:00-11:30', patientName: '张三沃' },
                        { id: 8, serial: 8, status: 0, yyInterval: '11:30-12:00', patientName: '' },
                        { id: 9, serial: 9, status: 0, yyInterval: '12:00-12:30', patientName: '' },
                        { id: 10, serial: 10, status: 0, yyInterval: '12:30-13:00', patientName: '' },
                    ]
                },
                {
                    date: '2025-02-13',
                    list: [
                        { id: 1, serial: 1, status: 1, yyInterval: '08:00-08:30', patientName: '张三撒' },
                        { id: 2, serial: 2, status: 0, yyInterval: '09:30-09:00', patientName: '' },
                        { id: 3, serial: 3, status: 1, yyInterval: '09:00-09:30', patientName: '张三大' },
                        { id: 4, serial: 4, status: 0, yyInterval: '09:30-10:00', patientName: '' },
                        { id: 5, serial: 5, status: 0, yyInterval: '10:30-10:30', patientName: '' },
                        { id: 6, serial: 6, status: 0, yyInterval: '10:30-11:00', patientName: '' },
                        { id: 7, serial: 7, status: 1, yyInterval: '11:00-11:30', patientName: '张三沃' },
                        { id: 8, serial: 8, status: 0, yyInterval: '11:30-12:00', patientName: '' },
                        { id: 9, serial: 9, status: 0, yyInterval: '12:00-12:30', patientName: '' },
                        { id: 10, serial: 10, status: 0, yyInterval: '12:30-13:00', patientName: '' },
                    ]
                },
                {
                    date: '2025-02-15',
                    list: [
                        { id: 1, serial: 1, status: 1, yyInterval: '08:00-08:30', patientName: '张三撒' },
                        { id: 2, serial: 2, status: 0, yyInterval: '09:30-09:00', patientName: '' },
                        { id: 3, serial: 3, status: 1, yyInterval: '09:00-09:30', patientName: '张三大' },
                        { id: 4, serial: 4, status: 0, yyInterval: '09:30-10:00', patientName: '' },
                        { id: 5, serial: 5, status: 0, yyInterval: '10:30-10:30', patientName: '' },
                        { id: 6, serial: 6, status: 0, yyInterval: '10:30-11:00', patientName: '' },
                        { id: 7, serial: 7, status: 1, yyInterval: '11:00-11:30', patientName: '张三沃' },
                        { id: 8, serial: 8, status: 0, yyInterval: '11:30-12:00', patientName: '' },
                        { id: 9, serial: 9, status: 0, yyInterval: '12:00-12:30', patientName: '' },
                        { id: 10, serial: 10, status: 0, yyInterval: '12:30-13:00', patientName: '' },
                    ]
                },
                {
                    date: '2025-02-23',
                    list: [
                        { id: 1, serial: 1, status: 1, yyInterval: '08:00-08:30', patientName: '张三撒' },
                        { id: 2, serial: 2, status: 0, yyInterval: '09:30-09:00', patientName: '' },
                        { id: 3, serial: 3, status: 1, yyInterval: '09:00-09:30', patientName: '张三大' },
                        { id: 4, serial: 4, status: 0, yyInterval: '09:30-10:00', patientName: '' },
                        { id: 5, serial: 5, status: 0, yyInterval: '10:30-10:30', patientName: '' },
                        { id: 6, serial: 6, status: 0, yyInterval: '10:30-11:00', patientName: '' },
                        { id: 7, serial: 7, status: 1, yyInterval: '11:00-11:30', patientName: '张三沃' },
                        { id: 8, serial: 8, status: 0, yyInterval: '11:30-12:00', patientName: '' },
                        { id: 9, serial: 9, status: 0, yyInterval: '12:00-12:30', patientName: '' },
                        { id: 10, serial: 10, status: 0, yyInterval: '12:30-13:00', patientName: '' },
                    ]
                }

            ],
            paramsDate: moment().format('YYYY-MM'),
        }
    },
    created() {
        moment.locale('zh-cn')
    },
    mounted() {
        this.getMainData();
    },
    methods: {
        goBackToHome() {
            this.$router.push({ path: '/' });
        },
        getMainData() {
            getAction('/wz/statistics/doctorSchedule', { date: this.paramsDate }).then(res => {
                this.mainList = res.result
            })
        },
        onPanelChange(value) {
            if (this.moment(value).format('YYYY-MM') == this.paramsDate) return;
            this.paramsDate = this.moment(value).format('YYYY-MM')
            this.getMainData();
        },
        headerRender({ value, type, onChange, onTypeChange }) {
            const start = 0;
            const end = 12;
            const monthOptions = [];
            const current = value.clone();
            const localeData = value.localeData();
            const months = [];
            for (let i = 0; i < 12; i++) {
                current.month(i);
                months.push(localeData.monthsShort(current));
            }
            for (let index = start; index < end; index++) {
                monthOptions.push(
                    <a-select-option key={`${index}`}>
                        {months[index]}
                    </a-select-option>,
                );
            }
            const month = value.month();
            return (
                <div class='monthVss'>
                    <div class='monthVs'>
                        月份：
                        <a-select
                            class="monthV"
                            dropdownMatchSelectWidth={false}
                            value={String(month)}
                            onChange={selectedMonth => {
                                const newValue = value.clone();
                                newValue.month(parseInt(selectedMonth, 10));
                                onChange(newValue);
                            }}
                        >
                            {monthOptions}
                        </a-select>
                    </div>
                </div>
            );
        },
        getListData(value) {
            let info = { list: [], isNum: 0 };
            this.mainList.map(i => {
                if (this.moment(value).format('YYYY-MM-DD') == i.date) {
                    info.yyList = i.yyList
                    i.yyList.map(n => {
                        if (n.status == 1) info.isNum++
                    })
                }
            })
            return info;
        },
    },
}
</script>

<style lang="less" scoped>
.cellVs {
    height: 100%;
}

.cellV {
    position: relative;
    height: 100%;

    .cellVt {
        height: 22px;
    }

    .cellVe {
        list-style: none;
        height: calc(100% - 22px);
        margin: 0;
        padding: 0;
        overflow-y: auto;
        display: block;

        .cellVei {
            display: flex;
            align-items: center;
            justify-content: space-around;

            span {
                display: inline-block;
            }
        }
    }
}

/deep/.ant-fullcalendar-value,
/deep/.ant-fullcalendar-column-header-inner {
    font-size: 24px;
    font-weight: bold;
}

/deep/.ant-fullcalendar-fullscreen .ant-fullcalendar-table {
    height: calc(100vh - 180px);
}

/deep/.ant-fullcalendar-content {
    overflow: hidden;
}

.monthVss {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .monthVs {
        margin-right: 20px;
        font-size: 16px;
        background: #004236;
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        color: #fff;
        border-radius: 8px;
        margin-bottom: 15px;

        .monthV {
            width: 100px;
        }
    }
}

::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
    background: #03c29f;
}

::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
    border-radius: 10px;
    background: #ededed;
}
</style>